<template>

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column  label="配置资源" >
        <template #default="scope">
            <el-button  type="primary" @click="handleEdit(scope.row.id)">配置</el-button>
        </template>
    </el-table-column>
</el-table>


<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <el-transfer v-model="checkedlist" :data="reslist" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>






  
  
  
</template>
  
  
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
import http from '../http';

  
const tableData = ref([])

const dialogVisible = ref(false)


const checkedlist = ref([])

const reslist = ref([])

let role_id = null
  

const getdata = () => {
    axios.get('http://127.0.0.1:8000/rbac/rsource/')
    .then((res) => {
        tableData.value = res.data
    })
  
}
  
  
onMounted(() => {
      getdata()
})
  


const getrslist = (id) => {
    const data = {
        role_id: id
    }

    axios.post(`http://127.0.0.1:8000/rbac/rslist/`, data)
    .then((res) => {
        console.log(res)
        reslist.value = res.data.all_list
        checkedlist.value = res.data.source_list

    })

 }




const handleEdit = (id) => {
    getrslist(id)
    role_id = id
    dialogVisible.value = true

}




const submit = () => {
    const data = {
        role: role_id,
        list: checkedlist.value
    }
    console.log(data)
    dialogVisible.value = false
    axios.post(`http://127.0.0.1:8000/rbac/urs/`, data)
    .then((res) => {
        console.log(res)
    })
   

}




  
  
</script>
  
  
  
<style scoped>
  
  
  
</style>




